<?php
$this->headTitle('Current Projects');
?>
<script type="text/javascript">
$(document).ready(function() {
    $('.message_head').click(function() {
        $(this).next('.message_body').slideToggle(500);
        return false;
    });

    $('#newProjectButton').click(function() {
        $('#newProjectDialog').dialog('open');
    });

    $('#newProjectDialog').dialog({
        bgiframe:   true,
        autoOpen:   false,
        modal:      true,
        width:      350,
        buttons:    {
            'Add Project':  function() {
                $.ajax({
                    data:   {
                        projectName:        $('#projectName').val(),
                        projectDescription: $('#projectDescription').val()
                    },
                    dataType:   'json',
                    success:    function(rsp, status) {
                        if(rsp.status == 1) {
                            window.location = '<?php echo $this->baseUrl(); ?>';
                        } else {
                            alert('There was a problem adding the project. Please contact tech support.');
                        }
                    },
                    type:       'POST',
                    url:        '<?php echo $this->baseUrl();?>/projects/add'
                });
            }
        }
    });
});
</script>

<h1>Current Projects</h1>

<ul class="message_list">
    <?php foreach($this->projects as $project): ?>
		<li>
            <p class="message_head"><?php echo $project->name; ?></p>
            <p class="message_body">
    			<?php echo $project->description; ?>
	    		<a style="text-align: right; clear: both;" href="<?php echo $this->baseUrl(); ?>/projects/load/project/<?php echo $project->id; ?>">View</a>
            </p>
		</li>
	<?php endforeach; ?> 
</ul>

<button id="newProjectButton" style="float: right">Add Project</button>

<div id="newProjectDialog" title="Add New Project" class="left">
    <dl>
        <dt>Project Name:</dt>
            <dd><input type="text" name="projectName" id="projectName"></dd>
        <dt>Project Description:</dt>
            <dd><textarea style="height: 200px; width: 300px" name="projectDescription" id="projectDescription"></textarea>
    </dl>
</div>
